<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!-- 头部 -->
<div th:fragment="top" class="header">
  <div class="site-topbar">
    <div class="container w clearfix">
      <!-- 头部导航 -->
      <div class="topbar-nav fl">
        <a href="/">小米商城</a>
        <span>|</span>
        <a href="#">MIUI</a>
        <span>|</span>
        <a href="#">IoT</a>
        <span>|</span>
        <a href="#">云服务</a>
        <span>|</span>
        <a href="#"> 天星数科</a>
        <span>|</span>
        <a href="#">有品</a>
        <span>|</span>
        <a href="#">小爱开放平台</a>
        <span>|</span>
        <a href="#">企业团购</a>
        <span>|</span>
        <a href="#">资质证照</a>
        <span>|</span>
        <a href="#">协议规则</a>
        <span>|</span>
        <a href="/" id="j-app" class="topbar-download">
          下载app
          <div class="appcode">
            <img src="images/download.png" alt="小米商城" width="90" height="90">
            小米商城app
          </div>
        </a>
        <span>|</span>
        <a href="#">智能生活</a>
        <span>|</span>
        <a href="#">Select Location</a>
      </div>
      <div class="site-shop fr">
        <a href="/page/cart/list" class="cart">
          <em class="iconfont">&#xe61c;</em>购物车
          <span class="J-sp"> (0) </span>
        </a>
        <div class="j-menu">
          购物车中还没有商品，赶紧选购吧！
        </div>
      </div>
      <div class="topbar-info fr">
        <th:block th:if="${session.user!=null}">
          <a href="javascript:void(0)" th:text="${session.user.name}"></a>
          <a href="javascript:void(0)" onclick="logout()">退出</a>
        </th:block>
        <th:block th:if="${session.user==null}">
          <a href="/page/login?returnURI=/">登录</a>
          <span>|</span>
          <a href="/page/register">注册</a>
          <span>|</span>
        </th:block>
        <span class="site-info-span">
                          <a href="#">消息通知</a>
                      </span>
      </div>
    </div>
  </div>
  <div class="site-header">
    <div class="container w clearfix">
      <!-- logo -->
      <div class="head-logo fl">
        <a href="/" class="logo text">
          小米官网
        </a>
      </div>
      <!-- nav -->
      <div class="header-nav fl">
        <ul class="nav-list">
          <li class="nav-category">
            <a href="#" id="header-title" class="header-title">全部商品分类</a>
            <div class="site-category" style="display: none">
              <ul id="categoryListId" class="cat-ul">
                <!-- <li  class="category-list">
                     <a href="#" class="cat-title">
                         手机 电话卡
                         <em class="cat-icon iconfont">&#xe638;</em>
                     </a>
                     &lt;!&ndash; js &ndash;&gt;
                     <div class="commodity clearfix">
                         <ul class="com-ul">
                             <li class="com-li">
                                 <a href="#" class="link clearfix">
                                     <img src="images/01-1.webp" alt="" width="40" height="40">
                                     <span class="text">小米 11</span>
                                 </a>
                             </li>
                         </ul>
                     </div>
                 </li>-->

              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">小米手机</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/1-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/1-02.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/1-03.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/1-04.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/1-05.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">Redmi 红米</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/2-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/2-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/2-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/2-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/2-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/2-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">电视</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/3-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/3-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/3-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/3-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/3-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/3-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">笔记本</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/4-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/4-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/4-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/4-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/4-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/4-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">家电</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/5-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/5-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/5-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/5-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/5-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/5-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">路由器</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/6-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/6-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/6-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/6-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/6-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/6-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="link">
              <span class="text">智能硬件</span>
            </a>
            <!-- nav - js -->
            <div class="header-nav-menu">
              <div class="container w">
                <ul>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure figure-none">
                        <img src="images/7-01.webp" alt="小米11" width="160" height="110">
                      </div>
                      <div class="title">小米11</div>
                      <p>3999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/7-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                      </div>
                      <div class="title">小米10至尊纪念版</div>
                      <p>5299元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/7-01.webp" alt="小米10" width="160" height="110">
                      </div>
                      <div class="title">小米10</div>
                      <p>3399元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <em></em>
                    <a href="#">
                      <div class="figure">
                        <img src="images/7-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                      </div>
                      <div class="title">小米10 青春版 5G</div>
                      <p>1999元起</p>
                    </a>
                  </li>
                  <li class="menu-nav">
                    <a href="#">
                      <div class="figure">
                        <img src="images/7-01.webp" alt="小米MIX Alpha" width="160" height="110">
                      </div>
                      <div class="title">小米MIX Alpha</div>
                      <p>19999元起</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#" class="link">
              <span class="text">服务</span>
            </a>
          </li>
          <li>
            <a href="#" class="link">
              <span class="text">社区</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 搜索框 -->
      <div class="header-search fr">
        <form action="/page/product/list" method="GET" class="search-form">
          <input type="text" name="name" class="search-text" placeholder="小米11">
          <input type="submit" class="search-btn iconfont" value="&#xe652;">
        </form>
      </div>
    </div>
  </div>
  <script>
    function logout() {
      $.post(
              '/user/logout',
              function (result) {
                if (result.code == 0) {
                  mylayer.okUrl(result.msg, '/page/login');
                }
              },
              'json'
      );
    }
  </script>
</div>
</body>
</html>